<template>
  <div>
    <div class="region">
        <div class="top">
            <p>我的订单</p>
            <div class="ding">
                全部订单
                <van-icon name="arrow" />
            </div>
        </div>
        <!-- 我的订单 -->
        <div class="center">
            <van-grid :column-num="5" :border="false">
                <van-grid-item :key="value" icon="pending-payment" text="待付款" />
                <van-grid-item :key="value" icon="send-gift-o" text="待发货" />
                <van-grid-item :key="value" icon="logistics" text="已发货" />
                <van-grid-item :key="value" icon="smile-comment-o" text="待评价" />
                <van-grid-item :key="value" icon="balance-pay" text="退货/售后" />
            </van-grid>
        </div>
        <div class="bottom">
            <van-swipe :loop="true">
                <van-swipe-item>
                    <img src="https://static.asus.com.cn/store/20230202/14235054524951.png" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://static.asus.com.cn/store/20230201/15391955524952.jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://static.asus.com.cn/store/20230202/11222549101515.jpg" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
        <!-- 我的服务 -->
    <div class="service">
        <p>我的服务</p>
        <van-grid :column-num="4" :border="false">
            <van-grid-item icon="like-o" text="我的收藏" />
            <van-grid-item icon="orders-o" text="我的预约" />
            <van-grid-item icon="gift-o" text="我的活动" />
            <van-grid-item icon="location-o" text="网点查询" />
            <van-grid-item icon="phone-circle-o" text="A码兑换" />
        </van-grid>
    </div>
    <div class="exchange">
        <div class="top">
            <p>我的兑换</p>
            <div class="ding">
                更多
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="bottom">
            <div class="box" v-for="(v,index) in img" :key="index">
                <img :src="v" alt="">
                <p>{{ p[index] }}</p>
                <span>{{ span[index] }}</span>
            </div>
            
        </div>
    </div>

 

  </div>
</template>

<script>
export default {
    data() {
        return {
            img: ["https://static.asus.com.cn/store/album/images/PJWNOM6YX7W8FF/16544553100101.jpg", "https://static.asus.com.cn/store/album/images/G57999B740D50D/16050549484997.jpg", "https://static.asus.com.cn/store/album/images/KZ1N769ESQH7J4/17055854545699.jpg"],
            p: ["ROG玩家国度 ZOOM CAT7万兆七类电竞网线1.5M", "WT425无线鼠标 轻音鼠标 办公鼠标 人体工学鼠标游戏鼠标 USB鼠标", "UX300 PRO有线家用办公游戏静音USB鼠标笔记本台式机通用鼠标 黑色"],
            span:["1888积分+139.00元","688积分+49.00元","688积分+29.00元"]
        }
    }

}
</script>

<style lang="scss" scoped>

.exchange{
    width: 95vw;
    height: 60vw;
    margin: auto;
    background-color: white;
    border-radius: 2vw;
    margin-top: 4vw;
    .bottom{
        height: 46vw;
        display: flex;
        margin-right: 2vw;
        margin-left: 2vw;
        .box{
            width: 30vw;
            height: 46vw;
            img{
                width: 28vw;
                margin: 1vw;
            }
            p{
                margin: 0;
                font-size: 3vw;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            span{
                color: red;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                font-size: 2vw;
            }
        }
    }
    .top{
        height: 14vw;
        p{
            float: left;
            font-size: 4.5vw;
            text-indent: 6vw;
            margin: 0;
            line-height: 14vw;
        }
        .ding{
            color: #808080;
            float: right;
            font-size: 3.5vw;
            line-height: 14vw;
            padding-right: 6vw;
        }
    }
}
.service{
    width: 95vw;
    height: 70vw;
    margin: auto;
    background-color: white;
    border-radius: 2vw;
    p{
        height: 10vw;
        line-height: 10vw;
        text-indent: 4vw;
    }
}
.region{
    .bottom{
        width: 95vw;
        height: 23vw;
        margin: auto;
        img{
            height: 23vw;
        }
    }
    .top{
        height: 14vw;
        p{
            float: left;
            font-size: 4.5vw;
            text-indent: 6vw;
            margin: 0;
            line-height: 14vw;
        }
        .ding{
            color: #808080;
            float: right;
            font-size: 3.5vw;
            line-height: 14vw;
            padding-right: 6vw;
        }
    }
}

</style>